<template>
  <div class="user-chat">
    <!-- 导航栏 -->
    <van-nav-bar
      class="app-nav-bar"
      title="小智同学"
      left-arrow
      @click-left="$router.back()"
    ></van-nav-bar>

    <!-- 消息列表 -->
    <van-cell-group class="message-list">
      <van-cell title="1212"></van-cell>
      <van-cell title="1212"></van-cell>
      <van-cell title="1212"></van-cell>
      <van-cell title="1212"></van-cell>
      <van-cell title="1212"></van-cell>
      <van-cell title="1212"></van-cell>
    </van-cell-group>

    <!-- 发送信息 -->
    <van-cell-group class="send-message-wrap">
      <van-field v-model="message" placeholder="请输入用户名" :border="false">
      </van-field>
      <van-button type="primary" size="small">发送</van-button>
    </van-cell-group>
  </div>
</template>

<script>
import io from 'socket.io-client'
// 建立连接
const socket = io('/socket.io')
socket.on('connect', function () {
  console.log('连接建立成功了')
})
// 断开连接
socket.on('disconnect', function () {
  console.log('disconnect')
})
export default {
  name: 'user-chat',
  data () {
    return {
      message: ''
    }
  }
}
</script>

<style scoped lang="less">
.message-list {
  position: absolute;
  left: 0;
  right: 0;
  top: 46px;
  bottom: 44px;
  overflow-y: auto;
}
.send-message-wrap {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  padding: 0 10px;
  align-items: center;
}
.van-field {
  flex: 1;
}
</style>
